<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
		</title>
		<style>
			*{
				padding:0px;
				margin:0px;
			}
			.list{
				width:200px;
				margin:100px auto;
			}
			a{
				text-decoration: none;
				display: block;
				height: 30px;
				width:100%;
				position: relative;
				color:#fff;
				font-size: 16px;
				background: #ccc;
				line-height: 30px;
				border-bottom: 1px solid #dedede;
				/* text-align: center; */
				 padding-left:50px; 
				 box-sizing: border-box;
				
			}
			li{
				list-style: none;
			}
			.t2,.t3,.t4{
				display: none;
			}
			i{
				width:16px;
				height: 16px;
				position: absolute;
				top:8px;
				left:15px;
				/* padding:7px 0px; */
				display: inline-block;
				background:url(img/leftJia.png) no-repeat;
			}
			.current{
				background: red;
			}
		</style>
	</head>
	<body>
		
		<div class="list">
			<ul class='t1'>
				<li>
					        <a href="javascript:;"><i></i>一级菜单</a>
					        <ul class='t2'>
								<li><a href="javascript:;">二级菜单</a></li>

						<li> 
						         <a href="javascript:;"><i></i>二级菜单</a>
						         <ul class='t3'>
									 <li><a href="javascript:;">三级菜单</a></li>

							 <li>
								         <a href="javascript:;"><i></i>三级菜单</a>
								         <ul class='t4'>
									 <li><a href="javascript:;">四级菜单</a> </li>
									 <li><a href="javascript:;">四级菜单</a> </li>
								 </ul>
							 </li>
							 <li><a href="javascript:;">二级菜单</a></li>

						 </ul>
						</li>
						<li><a href="javascript:;">二级菜单</a></li>

					</ul>
				</li>
				<li>
					<a class="current" href="javascript:;"><i></i>一级菜单</a>
					<ul class='t2'>
						<li><a href="javascript:;"><i></i>二级菜单</a>
						<ul class='t3'>
							<li><a href="javascript:;"><i></i>三级菜单</a></li>
						</ul>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
	<script src="./js/jquery.min.js"></script>
	<script>
		$(function(){
			//1-1
			var h=1;
			$(".t1>li>a").click(function(){
				$(this).parent().siblings().children('a').removeClass("current");
				$(this).addClass("current");
				$(this).parent().children("ul").toggle();
            if(h%2==1){
				$(this).children('i').css({'background-image':"url(img/leftJian.png)"});
	              h=h+1;
			}else if(h%2==0){
				$(this).children('i').css({'background-image':"url(img/leftJia.png)"});
				h=h+1;
			}
			})
			
			//1-2
			var s=1;
			$(".t2>li>a").click(function(){
				$(this).parent().siblings().children('a').removeClass("current");
				$(this).addClass("current");
				$(this).parent().children("ul").toggle();
			if(s%2==1){
				$(this).children('i').css({'background-image':"url(img/leftJian.png)"});
			     s++;
			}else if(s%2==0){
				$(this).children('i').css({'background-image':"url(img/leftJia.png)"});
				s++;
			}
			})
			
			//1-3
				var t=1;
			$(".t3>li>a").click(function(){
				$(this).parent().siblings().children('a').removeClass("current");
				$(this).addClass("current");
				$(this).parent().children("ul").toggle();
			if(t%2==1){
				$(this).children('i').css({'background-image':"url(img/leftJian.png)"});
			     t++;
			}else if(t%2==0){
				$(this).children('i').css({'background-image':"url(img/leftJia.png)"});
				t++;
			}
			})
		})
	</script>
</html>
